import React, { memo } from "react";
import type { FC, ReactNode } from "react";
import { Areaitemv4Wrapper } from "./style";
import { formatCreateTime, formatTime } from "@/utils/format";
import { useAppDispatch, useAppSelector } from "@/store";
import { shallowEqual } from "react-redux";
import { changeSongdetailAction } from "@/views/player/store";

interface IProps {
  children?: ReactNode;
  itemData: any,
  index: number
}

const AreaItemv4: FC<IProps> = (props: IProps) => {
  const { itemData, index } = props
  const { playSongInfo } = useAppSelector((state) => ({
    playSongInfo: state.player.playSongInfo
  }), shallowEqual)

  const dispatch = useAppDispatch()
  const handlePlayClick = () => {
    dispatch(changeSongdetailAction(itemData?.songId || itemData.id))
  }

  return <Areaitemv4Wrapper iscurr={Number(playSongInfo.id === itemData.id)}>
    <div className="left-infos">
      <div className="icon" onClick={handlePlayClick}>
        <img src={require("@/assets/img/play.png")} alt="" />
      </div>
      <div className="index">{index + 1}</div>
      <div className="song-name">{itemData?.songName || itemData.name}</div>
    </div>
    {itemData?.dt && <div className="right-time">{formatTime(itemData.dt / 1000)}</div>}

    {itemData?.addTime && <div className="right-time"><div className="createText">创建时间</div>{`${formatCreateTime(itemData.addTime, "YYYY-MM-DD hh:mm:ss")}`}</div>}
  </Areaitemv4Wrapper>;
};

export default memo(AreaItemv4);